import React, { FC, useCallback, useState } from "react";
import { connect } from 'react-redux';

import { RootState } from '@store';
import { Theme } from '@interfaces';
import Menu from '@components/menu';
import Wallpapers from '@components/wallpapers';
import './index.scss';

interface Props {
  theme: Theme
}

const App: FC<Props> = (props: Props) => {

  const { theme } = props;

  const [wallpaperType, setWallpaperType] = useState<string>('');

  const onMenuItemClick = useCallback((key) => {
    setWallpaperType(key);
  }, [setWallpaperType]);

  return (
    <>
      <Menu
        theme={theme.theme}
        onMenuItemClick={onMenuItemClick}
      >
      </Menu>
      <Wallpapers wallpaperType={wallpaperType} />
    </>
  );
}

const mapStateToProps = (state: RootState) => ({ theme: state.theme });
// const mapDispatchToProps = (dispatch: AppDispatch) => ({ switchTheme: (theme: ThemeType) => dispatch(setTheme(theme)) });

export default connect(mapStateToProps, null)(App);
